<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="format-detection" content="telephone=no" />
    <title>增加电子导览信息</title>
    <meta content="" name="keywords" />
    <meta content="" name="description" />
    <meta content="" name="copyright" />
    <meta content="" name="author" />
    <meta name="robots" content="noarchive">
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/style.css">
    <style>
        .shop_msg_textarea {
            width: 100%;
            height: 1.5rem;
        }

        .shop_msg_textarea::-webkit-input-placeholder {
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: .25rem;
        }

        #show_map {
            width: 100%;
            height: 300px;
        }

        .upload-audiolist {
            margin: 10px;
            padding: 0 10px;
            box-sizing: border-box;
            display: grid;
            grid-template-columns: repeat(2, 120px);
            justify-content: space-between;
            grid-gap: 14px;
        }

        #audio_file,
        #img_file {
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="return_top bgyellow">
        <a href="viewguide.html">
            <span class="login_home cfff">返回电子导览信息</span>
        </a>
    </div>
    <!--//头部结束-->
    <!--主体区域-->
    <div class="bgfff cb7 pl20 pr20 pb120 mt30">
        <p class="fz30 pb20 cblue">完善电子导览信息</p>
        <form action="" method="post" class="viewtickettype_list">
            <input type="hidden" id="guideLat">
            <input type="hidden" id="guideLng">
            <input type="hidden" id="guideVoice">
            <input type="hidden" id="imgId">
            <div class="pb30">
                <div>
                    <div class="mydata_inf bb">
                        <img src="temp/view.png" class="mydata_inf_img mr20">
                        <input placeholder="景点名称" id="guideName" value="" type="text" class="mydata_inf_input mr20 originalprice">
                    </div>
                    <div class="clear" id="select_addr">
                        <div class="viewguide_address_fl bb fl">
                            <img src="temp/view.png" class="viewguide_address_fl_img mr20">
                            <input placeholder="景点地址(点击地图选择)" id="viewguide_input" readonly="readonly" value="" type="text" class="viewguide_address_fl_input mr20 discountprice">
                        </div>
                        <p class="fz28 mt30 viewguide_address_fr fr tc">定位</p>
                    </div>
                    <div id="show_map"></div>
                    <div class="mydata_inf bb mt30">
                        <img src="temp/view.png" class="mydata_inf_img mr20">
                        <textarea class="mydata_inf_input shop_msg_textarea" name="guideMsg" placeholder="景点信息" id="guideMsg"></textarea>
                    </div>

                    <p class="viewguide_button mt30 tc">景点讲解</p>

                    <div class="container">
                        <!--    照片添加    -->
                        <article class="upload-audiolist">
                            <div class="upload-file">
                                <input type="file" id="audio_file" accept="audio/*" name="audio_file" multiple="">
                            </div>
                        </article>

                    </div>
                    <p class="viewguide_button mt30 tc">景点图片</p>

                    <div class="container">
                        <!--    照片添加    -->
                        <article class="upload-piclist">
                            <div class="upload-file">
                                <input type="file" id="img_file" accept="image/*" name="img_file" multiple="">
                            </div>
                        </article>

                    </div>
                </div>
                <div class="viewtickettypeadd_button">
                    <a href="javascript:;" id="save_btn" class="w100 car_cont_submit fz32 cfff tc fl">保存</a>
                </div>
            </div>
        </form>
    </div>

    <!--底部-->
    <div class="footerpage"></div>
    <!--//底部-->
</body>
<script src="https://webapi.amap.com/maps?v=2.0&key=a451001d808ffff80790d52df188b739&plugin=AMap.Geocoder"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="js/urlTool.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/template-web.js"></script>
<script id="audio_tpl" type="text/html">
    <div class="upload-Picitem">
        <img src="temp/z_audio.png" id="{{data}}" class="audio">
    </div>
</script>
<script id="audiofile_tpl" type="text/html">
    <div class="upload-file">
        <input type="file" id="audio_file" accept="audio/*" name="audio_file" multiple="">
    </div>
</script>
<script id="img_item_tpl" type="text/html">
    <div class="upload-Picitem">
        <img src="{{objurl}}" id="{{attachid}}" class="img">
    </div>
</script>
<script id="img_list_tpl" type="text/html">
    {{each data.guidePicList}}
    <div class="upload-Picitem">
        <img src="{{fileUrl}}{{$value.attPath}}" id="{{$value.id}}" class="img">
    </div>
    {{/each}}
</script>
<script type="text/javascript">
$(".footerpage").load("footer.html",'',function() {    
    $('#myCenter').addClass("select-two").children().attr("class","myCenterclick");
});
    let shopMsg = getShopMsg();
    if (false != shopMsg) {
        if (shopMsg.shopType != 1) {
            layer.open({
                content: "店铺类型有误",
                btn: "我知道了",
                yes: function () {
                    if (history.length > 1) {
                        history.go(-1);
                    } else {
                        WeixinJSBridge.call("closeWindow");
                    }
                    return false;
                }
            });
        }
    } else {
        layer.open({
            content: "暂无景区信息",
            btn: "我知道了",
            yes: function () {
                if (history.length > 1) {
                    history.go(-1);
                } else {
                    WeixinJSBridge.call("closeWindow");
                }
                return false
            }
        });
    }
    var marker, map = new AMap.Map("show_map", {
        center: [shopMsg.shopLng, shopMsg.shopLat],
        zoom: 15,
    });
    var geocoder = new AMap.Geocoder();
    let id = getQueryVariable('id');
    if (id != false) {
        sm.req({
            url: '/SysShopEleGuide/toUpdate',
            data: {
                id: id
            },
            done: function (res) {
                if (res.code == 200) {
                    $("#guideName").val(res.data.guideName);
                    $("#guideMsg").val(res.data.guideMsg);
                    $("#guideLng").val(res.data.guideLng);
                    $("#guideLat").val(res.data.guideLat);
                    $("#imgId").val(res.data.id);
                    map.setCenter([res.data.guideLng, res.data.guideLat]);
                    addMarker(res.data.guideLng, res.data.guideLat);
                    geocoder.getAddress([res.data.guideLng, res.data.guideLat], function (status, result) {
                        if (status === 'complete' && result.regeocode) {
                            var address = result.regeocode.formattedAddress;
                            $("#viewguide_input").val(address);
                        }
                    });
                    if (res.data.guideVoice != undefined && res.data.guideVoice != '') {
                        $("#guideVoice").val(res.data.guideVoice);
                    }
                    if (res.data.guideVoiceMsg != undefined && res.data.guideVoiceMsg.id != undefined && res.data.guideVoiceMsg.id != "") {
                        let html = template("audio_tpl", {
                            data: res.data.guideVoiceMsg.id
                        });
                        $(".upload-audiolist").html(html);
                    }
                    if (res.data.guidePicList != undefined && res.data.guidePicList.length > 0) {
                        res.fileUrl = fileUrl;
                        let html = template("img_list_tpl", res);
                        $(".upload-piclist").append(html);
                    }
                } else {
                    layer.open({
                        content: res.message,
                        btn: '我知道了'
                    })
                    return false;
                }
            }
        });
    }



    map.on('click', function (e) {
        clearMarker();
        let lat = e.lnglat.lat;
        let lng = e.lnglat.lng;
        $("#guideLat").val(lat);
        $("#guideLng").val(lng);
        addMarker(lng, lat);
        geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.regeocode) {
                var address = result.regeocode.formattedAddress;
                $("#viewguide_input").val(address);
            }
        });
    });

    function clearMarker() {
        if (marker) {
            marker.setMap(null);
            marker = null;
        }
    }

    function addMarker(lng, lat) {
        marker = new AMap.Marker({
            icon: "temp/poi-marker-default.png",
            position: [lng, lat],
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
    }
    $("body").on('change', '#audio_file', function () {
        let that = $(this);
        let file = $("#audio_file")[0].files[0];
        let data = new FormData();
        data.append("file", file);
        sm.req({
            url: '/upload/uploadOtherFile',
            data: data,
            processData: false,
            contentType: false,
            done: function (res) {
                if (res.code == 200) {
                    let html = template("audio_tpl", {
                        data: res.data.attachid
                    });
                    $(".upload-audiolist").html(html);
                    $("#guideVoice").val(res.data.objid);
                    that.val("");
                }
                layer.open({
                    content: res.message,
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
            }
        })
    });
    $("body").on('click', '.audio', function (e) {
        let that = $(this);
        layer.open({
            content: '删除当前音频文件？',
            btn: ['确定', '取消'],
            yes: function (index) {
                sm.req({
                    url: '/upload/deleteUpload',
                    data: {
                        'attachId': that.attr('id')
                    },
                    done: function (res) {
                        that.parent().remove();
                        let html = template("audiofile_tpl", {});
                        $(".upload-audiolist").html(html);
                        $("#guideVoice").val(null);
                    }
                })
                layer.close(index);
            }
        });
    });
    $("#img_file").on('change', function () {
        let that = $(this);
        let file = $("#img_file")[0].files[0];
        let filesize = 0;
        let filemaxsize = 10240;
        let filepath = that.val();
        if (filepath) {
            filesize = file.size;
            let size = filesize / 1024;
            if (size > filemaxsize) {
                layer.open({
                    content: '图片大小不能大于10M',
                    btn: '我知道了'
                });
                that.val("");
                return false;
            } else if (size <= 0) {
                layer.open({
                    content: '图片大小不能小于0M',
                    btn: '我知道了'
                });
                that.val("");
                return false;
            }
        } else {
            return false;
        }
        let data = new FormData();
        data.append("file", file);
        let imgId = $("#imgId").val();
        if (imgId != '') {
            data.append('objid', imgId);
        }
        let objurl = getObjectURL(file);
        sm.req({
            url: '/upload/uploadPic',
            data: data,
            processData: false,
            contentType: false,
            done: function (res) {
                if (res.code == 200) {
                    let html = template('img_item_tpl', {
                        objurl: objurl,
                        attachid: res.data.attachid
                    });
                    $(".upload-piclist").append(html);
                    $("#imgId").val(res.data.objid);
                    that.val("");
                }
                layer.open({
                    content: res.message,
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
            }
        })
    });
    $("body").on('click', '.img', function (e) {
        let that = $(this);
        layer.open({
            content: '删除当前图片文件？',
            btn: ['确定', '取消'],
            yes: function (index) {
                sm.req({
                    url: '/upload/deleteUpload',
                    data: {
                        'attachId': that.attr('id')
                    },
                    done: function (res) {
                        that.parent().remove();
                    }
                })
                layer.close(index);
            }
        });
    });

    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    $("#save_btn").on('click', function () {
        let guideName = $("#guideName").val();
        let guideLat = $("#guideLat").val();
        let guideLng = $("#guideLng").val();
        let guideMsg = $("#guideMsg").val();
        let guideVoice = $("#guideVoice").val();
        let imgId = $("#imgId").val();
        if ($.trim(guideName) == '') {
            layer.open({
                content: '请输入景点名称',
                btn: '我知道了'
            })
            return false;
        }
        if (guideLat == '') {
            layer.open({
                content: '请在地图中选择景点位置',
                btn: '我知道了'
            })
            return false;
        }
        if ($.trim(guideMsg) == '') {
            layer.open({
                content: '请输入景点信息',
                btn: '我知道了'
            })
            return false;
        }
        let data = {
            guideName: guideName,
            guideLat: guideLat,
            guideLng: guideLng,
            guideMsg: guideMsg,
        };
        if (guideVoice != '') {
            data.guideVoice = guideVoice;
        }
        if (imgId != '') {
            data.id = imgId;
        }
        sm.req({
            url: '/SysShopEleGuide/update',
            data: data,
            done: function (res) {
                if (res.code == 200) {
                    layer.open({
                        content: '保存成功',
                        btn: '我知道了',
                        yes: function () {
                            location.href = "viewguide.html";
                        }
                    })
                } else {
                    layer.open({
                        content: res.message,
                        btn: '我知道了'
                    })
                }
            }
        });
    });
</script>

</html>